<template>
  <div class="container">
    <van-cell :title="label">
      <!-- 主体内容 -->
      <template #label>
        <ul class="main">
          <li v-if="identify"><span>群组编码</span>
            <p>{{identify}}</p>
          </li>
          <li v-if="effTime"><span>生效时间</span>
            <p>{{effTime}}</p>
          </li>
          <li v-if="expTime"><span>失效时间</span>
            <p>{{expTime}}</p>
          </li>
          <li v-if="stateBottom"><span>用户在群状态</span>
            <p :style="{color:stateColor}">{{stateText}}</p>
          </li>
        </ul>
        <slot></slot>
      </template>
    </van-cell>
    <div v-if="state" class="state" :style="{color:stateColor}">{{stateText}}</div>
  </div>
</template>

<script>
export default {
  name: 'InfoPanelItem',
  props: {
    // 标题
    label: {
      type: String,
      required: true
    },
    // 有效时间
    effTime: String,
    // 无效时间
    expTime: String,
    // 状态
    state: String,
    // 底部状态
    stateBottom: String,
    // 编码
    identify: String,

  },
  computed: {
    // 状态颜色
    stateColor() {
      let color
      if (this.state === "1" || this.stateBottom === "1") {
        color = "#00ff00"
      } else if (this.state === "0" || this.stateBottom === "0") {
        color = "#ff0000"
      } else {
        color = "#ff7f00"
      }
      return color
    },
    // 状态文本
    stateText() {
      let color
      if (this.state === "1" || this.stateBottom === "1") {
        color = "有效"
      } else if (this.state === "0" || this.stateBottom === "0") {
        color = "无效"
      } else {
        color = "其它"
      }
      return color
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  .main {
    li {
      display: flex;
      justify-content: space-between;
      margin-top: 13px;
      padding-right: 33px;
      p {
        margin: 0;
        color: #666;
        width: 120px;
      }
    }
  }
  .state {
    position: absolute;
    top: 10px;
    right: 16px;
  }
}
</style>